<template>
	<view class="page" :style="{'height':h+'px'}">
		<c-nav-bar title="海钓预约"></c-nav-bar>
		<view class="content" :style="{'margin-top':mt+'px'}">
			<view class="c_box">
				<view class="cb_item">
					<view>{{object.title}}</view>
					<view>￥{{object.price}}</view>
				</view>
				<view class="cb_item">
					<view>购买数量</view>
					<view class="cbi_num">
						<image src="@/static/index/steamerTicket/img_reduce.jpg" @tap="reduceNum"></image>
						<text>{{num}}</text>
						<image src="@/static/index/steamerTicket/img_increase.jpg" @tap="increaseNum"></image>
					</view>
				</view>
				<view class="cb_item">
					<view>商品总价</view>
					<view>￥{{price}}</view>
				</view>
			</view>
			<view class="c_box cb_yhq">
				<view class="cby_l">
					<image src="https://i.ringzle.com/file/20231110/2f48a1fca156497f9269d3879860e6eb.png"></image>
					<text>优惠券</text>
				</view>
				<view class="cby_r">
					<text>{{yhq}}</text>
					<image src="@/static/index/steamerTicket/icon_yjt.png"></image>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="b_left">
				合计：<span>￥</span><text>{{price}}</text>
			</view>
			<view class="b_right" @tap="surePay">确认支付</view>
		</view>
		<WechatPay ref="wxPay" @confirmPay="toPay"></WechatPay>
	</view>
</template>

<script>
	import WechatPay from '@/compoments/wechatPay/index.vue'
	export default {
		components:{WechatPay},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight - 56,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#111111"
				},
				object:null,
				price:0,
				num:1,
				yhq:'暂无可用优惠券'
			}
		},
		onLoad(option) {
			if(option.object){
				this.object = JSON.parse(option.object);
				this.price = this.object.price;
			} 
		},
		methods: {
			reduceNum(){
				if(this.num==1) return;
				this.num--;
				this.price = this.object.price*this.num;
			},
			increaseNum(){
				this.num++;
				this.price = this.object.price*this.num;
			},
			surePay(){
				this.$refs.wxPay.payShow = true;
			},
			toPay(){
				this.$refs.wxPay.payShow = false;
				uni.navigateTo({
					url:'/pagesIndex/seaFishing/result?object='+JSON.stringify({
						id:this.object.id,
						price:this.price
					})
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #F5F8FA;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 7rpx 24rpx 20rpx;
		box-sizing: border-box;
		.content{
			width: 100%;
			.c_box{
				width: 100%;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-top: 20rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				.cb_item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-top: 1rpx solid rgba(112, 112, 112, .1);
					padding: 28rpx 0;
					
					&>view{
						&:first-child{
							font-size: 30rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
						&.cbi_num{
							display: flex;
							align-items: center;
							image{
								width: 44rpx;
								height: 44rpx;
							}
							text{
								font-size: 28rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #333333;
								padding: 0 30rpx;
							}
						}
					}
					
					&:first-child{
						border-top: none;
						view{
							font-size: 32rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}
					}
					&:last-child{
						view{
							&:last-child{
								font-size: 32rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #FF4141;
							}
						}
					}
				}
				
				&.cb_yhq{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 34rpx 24rpx;
					box-sizing: border-box;
					.cby_l{
						display: flex;
						align-items: center;
						image{
							width: 30rpx;
							height: 30rpx;
						}
						text{
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #111111;
							margin-left: 20rpx;
						}
					}
					.cby_r{
						display: flex;
						align-items: center;
						text{
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #AAAAAA;
						}
						image{
							width: 30rpx;
							height: 30rpx;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
		
		.bottom{
			width: 100%;
			height: 112rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 8rpx 0rpx rgba(0,0,0,0.06);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 26rpx 0 30rpx;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
			.b_left{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				span{
					color: #FF4141;
				}
				text{
					font-size: 48rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #FF4141;
					margin-left: 5rpx;
				}
			}
			.b_right{
				width: 220rpx;
				height: 80rpx;
				background: #007A69;
				border-radius: 40rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
</style>